@page
@{ Layout = "_Layout"; }

<el-row :gutter="20">
  <el-col :span="18" :offset="3">
    <div style="height: 25px"></div>
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>邮件集成设置</span>
          <el-button type="primary" v-on:click="btnSubmitClick" size="small" style="float: right; margin-top: -5px;">
            保存设置
          </el-button>
        </div>
      </template>
      <div class="text">
        
        <el-form ref="form" :model="form" size="small" status-icon label-position="top">
          <el-switch
            v-model="form.isCloudMail"
            active-text="启用邮件发送"
          ></el-switch>
          <div class="tips" style="margin-top: 10px;">
            邮件发送能够实现内容变更通知以及表单提交等情景下的邮件发送功能。
            <el-link
              :underline="false"
              href="https://sscms.com/docs/v7/handbook/clouds/mail/"
              target="_blank"
              icon="el-icon-info"
            >
              了解更多
            </el-link>
          </div>

          <template v-if="form.isCloudMail">
            <div style="margin-top: 15px; margin-left: 30px;">
              <el-form-item label="发件人别名" prop="cloudMailFromAlias">
                <el-input v-model="form.cloudMailFromAlias" style="max-width: 400px;"></el-input>
                <div class="tips" style="margin-top: 10px;">
                  发件人别名将显示在邮件发件人邮箱之前
                </div>
              </el-form-item>
            </div>

            <div style="margin-top: 15px; margin-left: 30px;">
              <el-switch v-model="form.isCloudMailContentAdd" active-text="新增内容时发送邮件通知"></el-switch>
              <div class="tips" style="margin-top: 10px;">
                勾选后，当有内容新增后系统将发送邮件通知
              </div>
            </div>
            <div style="margin-top: 15px; margin-left: 30px;">
              <el-switch v-model="form.isCloudMailContentEdit" active-text="修改内容时发送邮件通知"></el-switch>
              <div class="tips" style="margin-top: 10px;">
                勾选后，当有内容修改后系统将发送邮件通知
              </div>
            </div>
            <div style="margin-top: 15px; margin-left: 30px;">
              <el-form-item label="接受邮件通知邮箱" prop="cloudMailAddress" :rules="{ validator: validateEmail, trigger: 'blur' }">
                <el-input v-model="form.cloudMailAddress" style="max-width: 400px;"></el-input>
              </el-form-item>
            </div>
          </template>
        </el-form>

      </div>
    </el-card>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/clouds/mail.js" type="text/javascript"></script>
}